<template>
    <view class="charts-box">
        <qiun-data-charts type="ring" :canvas2d="canvas2d" :opts="opts" :chartData="chartData" />
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onReady } from '@dcloudio/uni-app';
const canvas2d = ref(true);
const chartData = ref({});
const opts = ref({
    rotate: false,
    rotateLock: false,
    padding: [-20, 0, 0, 0],
    dataLabel: true,
    enableScroll: false,
    legend: {
        show: true,
        position: 'bottom',
        lineHeight: 16,
    },
    title: {
        name: '',
        fontSize: 16,
        color: '#333333',
    },
    subtitle: {
        name: '',
        fontSize: 13,
        color: '#666666',
    },
    extra: {
        ring: {
            ringWidth: 50,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: '#FFFFFF',
        },
    },
});

function getServerData() {
    setTimeout(() => {
        let res = {
            series: [
                {
                    data: [
                        {
                            name: '已掌握',
                            value: 50,
                            color: '#8979FF',
                            labelShow: false,
                        },
                        {
                            name: '熟悉',
                            value: 30,
                            color: '#FF928A',

                            labelShow: false,
                        },
                        {
                            name: '未掌握',
                            value: 20,
                            color: '#FFAE4C',
                            labelShow: false,
                        },
                        {
                            name: '未学习',
                            value: 18,
                            color: '#E6E6E6',
                            labelShow: false,
                        },
                    ],
                },
            ],
        };
        chartData.value = JSON.parse(JSON.stringify(res));
    }, 300);
}

onMounted(() => {
    getServerData();
});
</script>

<style lang="scss" scoped>
.charts-box {
    width: 100%;
    height: 500rpx;
}
</style>
